import { Outlet, Link } from "react-router";
import styled from "styled-components";

const FooterItem = styled.div`
  color: #333;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
`;

function App() {
  return (
    <>
      <div className="page h-full flex flex-col">
        <div className="flex-1 overflow-y-scroll">
          <Outlet></Outlet>
        </div>
        <div className="footer flex">
          <Link to="/home" className="flex-1">
            <FooterItem>
              <span>icon</span>
              <span className="font-[24px]">首页</span>
            </FooterItem>
          </Link>
          <Link to="/manage" className="flex-1">
            <FooterItem>
              <span>icon</span>
              <span>管店</span>
            </FooterItem>
          </Link>
          <Link to="/promotion" className="flex-1">
            <FooterItem>
              <span>icon</span>
              <span>营销</span>
            </FooterItem>
          </Link>
          <Link to="/analysis" className="flex-1">
            <FooterItem>
              <span>icon</span>
              <span>分析</span>
            </FooterItem>
          </Link>
        </div>
      </div>
    </>
  );
}

export default App;
